<template>
<div class="container">
     <el-card>
        <div slot="header" class="clearfix">
            <span>权限</span>
        </div>
        <div>
            <div>
                <el-link type="primary" icon="el-icon-arrow-left">返回</el-link> <span class="file-name">{{ id }}</span>
            </div>
            <div style="margin: 15px 0;">
                <el-button type="primary">添加</el-button>
                <el-button type="primary">批量修改</el-button>
                <el-button type="primary">批量删除</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" v-loading="loading" @selection-change="selectTable" ref="table">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column prop="department" label="用户部门" width="150"></el-table-column>
                <el-table-column label="阅读" width="150">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.read)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="复制">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.copy)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="打印">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.print)"></div>
                    </template>
                </el-table-column>
                <el-table-column  label="导出">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.export)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="注释">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.comment)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="编辑">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.edit)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="另存">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.save)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="授权">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.auth)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="文档水印">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.shuiyin)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="添加签章">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.add)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="撤销签章">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.remove)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="签章脱密">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.separate)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="失效时间" width="120">
                    <template slot-scope="scope">
                        <div v-html="formatIcon(scope.row.date)"></div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button @click="$router.push(`/auth/${scope.row.id}`)" type="text" size="small">修改</el-button>
                        <el-button @click="$router.push(`/outgoing/${scope.row.id}`)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-card>
</div>
</template>

<script>
import { list } from '@/api/authApi'
import { queryParams } from '@/assets/mixins'
export default {
    name: 'AuthPage',
    mixins: [queryParams],
    props: {
        id: String
    },
    data () {
        return {
            tableData: [],
            checkData: [],
            loading: true
        }
    },
    created () {
        this.initData()
    },
    computed: {
        isSelect () {
            return this.checkData.length > 0
        }
    },
    methods: {
        initData () {
            this.loading = true
            setTimeout(() => {
                const { data } = list()
                this.tableData = data
                this.queryList.total = data.length
                this.loading = false
            }, 1000)
        },
        search () {
            console.log('object')
        },
        selectTable (selection, row) {
            this.checkData = selection
        },
        formatIcon (val) {
            if (val === true) {
                return '<sapn class="fa fa-check" style="color: #67C23A;"></span>'
            } else if (val === false) {
                return '<sapn class="fa fa-close" style="color: #F56C6C;"></span>'
            } else {
                return val
            }
        }
    }
}
</script>

<style scoped>
.file-name {
    font-size: 14px;
    vertical-align: bottom;
    margin-left: 8px;
    line-height: 16px;
}
</style>
